---
title: 超链接
icon: Link
---

<MetaData
  lang="zh-CN"
  meta={{
    preset: [{
      client: '@univerjs/preset-sheets-hyper-link',
      locale: '@univerjs/preset-sheets-hyper-link/locales/zh-CN',
      style: '@univerjs/preset-sheets-hyper-link/lib/index.css',
    }],
    plugins: [{
      client: '@univerjs/sheets-hyper-link',
      facade: '@univerjs/sheets-hyper-link/facade',
    }, {
      client: '@univerjs/sheets-hyper-link-ui',
      facade: '@univerjs/sheets-hyper-link-ui/facade',
      locale: '@univerjs/sheets-hyper-link-ui/locale/zh-CN',
      style: '@univerjs/sheets-hyper-link-ui/lib/index.css',
    }],
    server: '否',
  }}
/>

超链接用于实现电子表格内部工作表、单元格，以及外部网页、电子邮件地址等内容的快速跳转与访问。

<PlaygroundFrame lang="zh-CN" slug="sheets/hyper-link" clickToShow />

## 预设模式

### 安装

```package-install
npm install @univerjs/preset-sheets-hyper-link
```

### 使用

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'
import { UniverSheetsHyperLinkPreset } from '@univerjs/preset-sheets-hyper-link' // [!code ++]
import UniverPresetSheetsHyperLinkZhCN from '@univerjs/preset-sheets-hyper-link/locales/zh-CN' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-hyper-link/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: mergeLocales(
      UniverPresetSheetsCoreZhCN,
      UniverPresetSheetsHyperLinkZhCN, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsHyperLinkPreset(), // [!code ++]
  ],
})
```

### 预设与配置

```typescript
UniverSheetsHyperLinkPreset({
  // 自定义外部链接跳转方式
  urlHandler: {
    navigateToOtherWebsite: url => window.open(`${url}?utm_source=univer`, '_blank'),
  },
})
```

完整的配置项参考 [`IUniverSheetsHyperLinkPresetConfig`](https://github.com/dream-num/univer-presets/blob/dev/packages/preset-sheets-hyper-link/src/umd.ts#L14)。

## 插件模式

### 安装

```package-install
npm install @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-ui
```

### 使用

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsHyperLinkPlugin } from '@univerjs/sheets-hyper-link' // [!code ++]
import { UniverSheetsHyperLinkUIPlugin } from '@univerjs/sheets-hyper-link-ui' // [!code ++]
import SheetsHyperLinkUIZhCN from '@univerjs/sheets-hyper-link-ui/locale/zh-CN' // [!code ++]

import '@univerjs/sheets-hyper-link-ui/lib/index.css' // [!code ++]

import '@univerjs/sheets-hyper-link/facade' // [!code ++]
import '@univerjs/sheets-hyper-link-ui/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: mergeLocales(
      SheetsHyperLinkUIZhCN, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsHyperLinkPlugin) // [!code ++]
univer.registerPlugin(UniverSheetsHyperLinkUIPlugin) // [!code ++]
```

### 插件与配置

```typescript
univer.registerPlugin(UniverSheetsHyperLinkUIPlugin, {
  // 自定义外部链接跳转方式
  urlHandler: {
    navigateToOtherWebsite: url => window.open(`${url}?utm_source=univer`, '_blank'),
  },
})
```

完整的配置项参考 [`IUniverSheetsHyperLinkUIConfig`](https://github.com/dream-num/univer/blob/dev/packages/sheets-hyper-link-ui/src/controllers/config.schema.ts#L26)。

## Facade API

完整 Facade API 类型定义，请查看 [FacadeAPI](https://reference.univer.ai/zh-CN)

### 构建/解析/跳转

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const sheets = fWorkbook.getSheets()

// 创建一个到第一个工作表的 F6 单元格的超链接
const sheet1 = sheets[0]
const range = sheet1.getRange('F6')
const hyperlink = range.getUrl()

// 解析超链接
const hyperlinkInfo = fWorkbook.parseSheetHyperlink(hyperlink)

// 切换到第二个工作表
fWorkbook.setActiveSheet(sheets[1])
fWorkbook.getActiveSheet().getSheetName()

// 3 秒后跳转到超链接
setTimeout(() => {
  fWorkbook.navigateToSheetHyperlink(hyperlink)
  fWorkbook.getActiveSheet().getSheetName()
}, 3000)
```

### 在单元格上操作超链接

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// 在 A1 单元格创建一个指向 Univer 的超链接
const fRange = fWorksheet.getRange('A1')
const richText = univerAPI.newRichText().insertLink('Univer', 'https://univer.ai/')
fRange.setRichTextValueForCell(richText)

// 查询当前单元格中的超链接
const cellValue = fRange.getValue(true)
const hyperlinks = cellValue.getLinks()

// 3 秒后更新超链接
setTimeout(() => {
  const id = hyperlinks[0].rangeId
  const newUrl = 'https://insight.univer.ai/'
  const newRichText = cellValue.copy().updateLink(id, newUrl)
  fRange.setRichTextValueForCell(newRichText)
}, 3000)

// 6 秒后取消超链接
setTimeout(() => {
  const newCellValue = fRange.getValue(true)
  const newHyperlinks = newCellValue.getLinks()
  const id = newHyperlinks[0].rangeId
  const newRichText = newCellValue.copy().cancelLink(id)
  fRange.setRichTextValueForCell(newRichText)
}, 6000)
```

### 事件监听

完整事件类型定义，请查看 [Events](https://reference.univer.ai/zh-CN/classes/FEventName)。

通过 `univerAPI.addEvent()` 可以监听超链接相关的事件：

#### 链接添加事件

`univerAPI.Event.BeforeSheetLinkAdd`: 添加链接前触发

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetLinkAdd, (params) => {
  const { workbook, worksheet, row, col, link } = params

  // 取消添加链接操作
  params.cancel = true
})

// 移除事件监听器，使用 `disposable.dispose()`
```

#### 链接更新事件

`univerAPI.Event.BeforeSheetLinkUpdate`: 更新链接前触发

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetLinkUpdate, (params) => {
  const { workbook, worksheet, row, column, id, payload } = params

  // 取消更新链接操作
  params.cancel = true
})

// 移除事件监听器，使用 `disposable.dispose()`
```

#### 链接删除事件

`univerAPI.Event.BeforeSheetLinkCancel`: 取消链接前触发

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetLinkCancel, (params) => {
  const { workbook, worksheet, row, column, id } = params

  // 取消取消链接操作
  params.cancel = true
})

// 移除事件监听器，使用 `disposable.dispose()`
```

每个事件都包含以下通用参数：
- `workbook`: 当前工作簿实例
- `worksheet`: 当前工作表实例
- `row`: 包含链接的单元格行索引
- `column`: 包含链接的单元格列索引

特殊参数：
- `BeforeSheetLinkAdd` 事件包含 `link`: 即将添加的链接
- `BeforeSheetLinkUpdate` 事件包含：
  - `id`: 链接标识符
  - `payload`: 新的链接数据
- `BeforeSheetLinkCancel` 事件包含 `id`: 即将删除的链接标识符

所有事件回调函数都可以使用 `params.cancel = true` 来阻止对应的操作。
